<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>输入提示后查询</title>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main.css" />
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=932be7440e072742cf07d7e681a233a0"></script>
    <style type="text/css">
        body {
            font-size: 12px;
        }

        #tip {
            background-color: #ddf;
            color: #333;
            border: 1px solid silver;
            box-shadow: 3px 4px 3px 0px silver;
            position: absolute;
            top: 10px;
            right: 10px;
            border-radius: 5px;
            overflow: hidden;
            line-height: 20px;
        }

        #end {
            position: absolute;
            top: 100px;
            right: 10px;
        }

        #end div {
            width: 100px;
            height: 50px;
            border-radius: 20px;
            background-color: #409eff;
            color: #fff;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
        }

        #tip input[type="text"] {
            height: 25px;
            border: 0;
            padding-left: 5px;
            width: 280px;
            border-radius: 3px;
            outline: none;
        }
    </style>
</head>

<body>
    <div id="mapContainer"></div>
    <div id="tip">
        <input type="text" id="keyword" name="keyword" value="请输入关键字：(选定后搜索)" onfocus='this.value=""' />
    </div>
    <div id="end">
        <div onclick="getData()">结束</div>
    </div>
    <script type="text/javascript">
        var res = [];
        var pathArr = [];
        var windowsArr = [];
        var marker = [];
        var map = new AMap.Map("mapContainer", {
            resizeEnable: true,
            center: [116.397428, 39.90923],//地图中心点
            zoom: 13,//地图显示的缩放级别
            keyboardEnable: false,
            layers: [
                // 卫星
                new AMap.TileLayer.Satellite(),
                // 路网
                new AMap.TileLayer.RoadNet()
            ]
        });
        function getData() {
            if (pathArr.length <= 2) {
                alert('请先画线')
            } else {
                pathArr.push(pathArr[0]);
                res.push(res[0]);
                // 画线
                var polyline = new AMap.Polyline({
                    path: pathArr,
                    isOutline: true,
                    outlineColor: '#ffeeff',
                    borderWeight: 3,
                    strokeColor: "#3366FF",
                    strokeOpacity: 1,
                    strokeWeight: 6,
                    // 折线样式还支持 'dashed'
                    strokeStyle: "solid",
                    // strokeStyle是dashed时有效
                    strokeDasharray: [10, 5],
                    lineJoin: 'round',
                    lineCap: 'round',
                    zIndex: 50,
                })
                polyline.setMap(map);
                console.log(JSON.stringify(res))
            }
        }
        AMap.event.addListener(map, 'click', getLnglat); //点击事件
        /*
         *@description:点击地图显示标记点 拿到坐标 画线
         *@date: 2020-08-20 12:17:11
        */
        function getLnglat(e) {
            // map.clearMap();
            var x = e.lnglat.getLng();
            var y = e.lnglat.getLat();
            pathArr.push([x, y]);
            res.push([x, y]);
            // 打点
            var marker = new AMap.Marker({
                position: [x, y]
            });
            marker.setMap(map);
            // 画线
            var polyline = new AMap.Polyline({
                path: pathArr,
                isOutline: true,
                outlineColor: '#ffeeff',
                borderWeight: 3,
                strokeColor: "#3366FF",
                strokeOpacity: 1,
                strokeWeight: 6,
                // 折线样式还支持 'dashed'
                strokeStyle: "solid",
                // strokeStyle是dashed时有效
                strokeDasharray: [10, 5],
                lineJoin: 'round',
                lineCap: 'round',
                zIndex: 50,
            })
            polyline.setMap(map)
        }
        AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () {
            var autoOptions = {
                city: "北京", //城市，默认全国
                input: "keyword"//使用联想输入的input的id
            };
            autocomplete = new AMap.Autocomplete(autoOptions);
            var placeSearch = new AMap.PlaceSearch({
                city: '北京',
                map: map
            })
            AMap.event.addListener(autocomplete, "select", function (e) {
                //TODO 针对选中的poi实现自己的功能
                placeSearch.setCity(e.poi.adcode);
                placeSearch.search(e.poi.name)
            });
        });
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
</body>

</html>
